<script setup>
import { defineProps, defineEmits } from 'vue';

defineProps({
  total: {
    type: Number,
    required: true,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 50, 100],
  },
  currentPage: {
    type: Number,
    default: 1,
  },
});

const emit = defineEmits(['current-change', 'size-change']);

const handleCurrentChange = (page) => {
  emit('current-change', page);
};

const handleSizeChange = (size) => {
  emit('size-change', size);
};
</script>

<template>
  <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
  />
</template>

<style scoped>

</style>